import loadingStyle from '@/style/loading.module.less'
import loadingSvg from '@/image/loading.svg'
// 创建loadingDom
function setUpLoadingDom() {
    const img = document.createElement('img');
    img.name = 'loading';
    img.src = loadingSvg;
    img.className = loadingStyle.loading;
    return img;
}
// 获取name为loading的img元素
function getLoadingDom(el) {
    return el.querySelector('img[name=loading]')
}
//指令配置
export default function(el, binding) {
    // 根据 binding.value 的值，决定创建或删除img元素
    if (binding.value) {
        if (!getLoadingDom(el)) {
            const setUpDom = setUpLoadingDom()
            el.appendChild(setUpDom)
        }
    } else {
        if (getLoadingDom(el)) {
            getLoadingDom(el).remove();
        }
    }
}
// 指令配置对象
// {
//     //指令第一次绑定到元素时调用
//     bind(el, binding) {
//         //根据binding对象中大的value，决定元素创建或删除
//         if (binding.value) {
//             if (!getLoadingDom(el)) {
//                 const setUpDom = setUpLoadingDom()
//                 el.appendChild(setUpDom)
//             }
//         }
//     },

//     //所绑定组件更新时调用
//     update(el, binding) {
//         if (binding.value == false) {
//             if (getLoadingDom(el)) {
//                 getLoadingDom(el).remove();
//             }
//         }
//     },

// }